﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邯郸市公安局峰峰矿区分局</title>
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/zhiban.css">
    <link rel="stylesheet" href="./css/page.css">

    <script src="./libs/jquery-1.9.1.min.js"></script>
    <script src="./libs/jquery.jDiaporama.js"></script>
    <script src="./libs/jquery.SuperSlide.2.1.1.js"></script>
    <script src="./libs/jquery.getParame.js"></script>
    <script src="./libs/jrender.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./libs/paging.js"></script>
    <script src="./libs/Calendar.js"></script>
    <!-- <script src="../config.js"></script> -->
    <!--[if IE 7]>
            <link rel="stylesheet" href="css/ie7.css">
    <![endif]-->
    <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css">
    <![endif]-->
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            margin: 0px auto;
            margin-top: 30px;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>

<body>
      <!-- 背景 -->
    <div class="s-bg-box">
        <img class="bg-img-1" src="./images/bg/bg-1.jpg" alt="">
        <img class="bg-img-2" style="display:none" src="./images/bg/bg-2.jpg" alt="">
        <img class="bg-img-3" style="display:none" src="./images/bg/bg-3.jpg" alt="">
        <img class="bg-img-4" style="display:none" src="./images/bg/bg-4.jpg" alt="">
    </div>

    <script>
        $(function () {

            var i = 1;
            setInterval(function () {
                $('.s-bg-box').fadeOut('slow', function () {
                    $('.bg-img-' + i).hide();
                    i++;
                    if (i >= 5) {
                        i = 1;
                    }
                    $('.bg-img-' + i).show();

                    // $('.s-bg-box img').attr('src', './images/bg/bg-' + i + '.jpg');
                    $('.s-bg-box').fadeIn('slow');
                });
            }, 12000);
        });
    </script>


    <div class="s-content-box">

        <!-- 头部 -->
        <div class="s-header-box">
            <div class="s-logo-box"></div>
        </div>


        <!-- nav模板引擎 -->
        <script type="text/x-jsrender" id="nav-specCard">
            {{for return_body}} {{if #getIndex()
            <11}} <li class="" lmid="{{:content}}">
                <a href="{{:url}}" target="_blank">{{:title}}</a>
                </li>
                {{/if}} {{/for}}
        </script>

        <!-- nav -->
        <div class="s-nav-box">
            <ul class="left-box" id="nav-box">
                <li class="active">
                    <a href="">加载中...</a>
                </li>

            </ul>
            <div class="search-input-box">
                <input type="text" id="search-input" class="search-input" placeholder="站内搜索" />
                <div class="search-btn"></div>
            </div>
            <label for="search-input" class="search-lable">站内搜索</label>
            <script>
                $('.search-btn').on('click', function () {
                    var search_val = $('#search-input').val();
                    if (!search_val) {
                        return;
                    }
                    $('#search-input').val('');
                    window.open(encodeURI('/app/search.html?title=' + search_val));

                });
            </script>
        </div>


        <!-- 内容1部分 -->
        <div class="s-model-content-box">
            <div class="s-insert-content-box">
                <div class="s-top-box">
                    <span class="line"></span>
                    当前位置:
                    <a href="/app/">首页</a>
                    &gt;&gt;

                    <a href="#">值班表</a>

                </div>
                <div class="dished-line"></div>

                <div class="s-bottom-box" id="content-box">
                    <div style="text-align:center;">
                        <span>开始时间
                            <input name="control_date" type="text" id="control_date" size="10" maxlength="10" onclick="new Calendar().show(this);" readonly="readonly">
                        </span>


                        <span>结束时间
                            <input name="control_date2" type="text" id="control_date2" size="10" maxlength="10" onclick="new Calendar().show(this);"
                                readonly="readonly">
                        </span>
                        <span>
                            <input name="" type="button" value="查询" onclick="queryZhiban()">
                        </span>
                    </div>




                    <div id="zhiban-box">
                        <table class="gridtable" style="text-align:center;">
                            <tr>
                                <th>值班时间</th>
                                <th>值班人</th>
                            </tr>
                            <tr>
                                <td>加载中...</td>
                                <td>加载中...</td>
                            </tr>
                        </table>
                    </div>

                    <script type="text/x-jsrender" id="zhiban-specCard">
                        <table class="gridtable" style="text-align:center;">
                            <tr>
                                <th>值班时间</th>
                                <th>值班人</th>
                            </tr>
                            {{for return_body}}
                            <tr>
                                <td>{{timeFilter:addtime}}</td>
                                <td>{{:content}}</td>
                            </tr>
                            {{/for}}
                        </table>
                    </script>

                </div>

                <div class="s-top-box">
                    <span class="line"></span>
                    <a href="#">值班表</a>
                    &gt;&gt;
                    <a href="#">文件下载/查看</a>

                </div>
                <div class="dished-line"></div>
                <div class="g-zbtable-box">
                    <div class="g-table-ul-box">
                        <div class="g-table-title">
                            <div class="g-table-title-div">标题</div>
                            <div class="g-table-title-div">下载Excel</div>
                            <div class="g-table-title-div">上传时间</div>
                        </div>
                        <ul id="page-box" class="g-table-ul">
                            加载中...
                            <!-- <li>
                                <div class="g-table-li-div">
                                    加载中.. 加载中.. 加载中.. . 加载中.. . 加载中..
                                </div>
                                <div class="g-table-li-div" style="color:#115fc2">
                                    [下载]
                                </div>
                                <div class="g-table-li-div">
                                    加载中...1
                                </div>
                            </li>
                            <li>
                                <span class="dolt"></span>
                                <div class="g-table-li-div">
                                    加载中...
                                </div>
                                <div class="g-table-li-div" id="operate" style="color:#115fc2">
                                    [查看内容]
                                </div>
                                <div class="g-table-li-div">
                                    加载中...
                                </div>
                            </li> -->


                        </ul>

                        <script type="text/x-jsrender" id="page-specCard">
                            {{for return_body}}
                            <li>
                                <div class="g-table-li-div">
                                    {{:title}}
                                </div>
                                {{if type == 1}}
                                <div class="g-table-li-div" style="color:#115fc2">
                                    {{if content == ""}}
                                        [文件不存在]
                                    {{else}}
                                        <a href="{{:content}}">[下载]</a>
                                    {{/if}}
                                    
                                </div>

                                {{/if}}
                                <div class="g-table-li-div">
                                    {{:regtimeToString}}
                                </div>
                            </li>
                            {{/for}}
                        </script>

                    </div>


                    <div id="page" class="page_div"></div>
                </div>

                <!-- <div class="g-showContent">

                   
                </div> -->
                <div style="clear:both"></div>
            </div>




        </div>

    </div>

    <script>
        $(function () {

            // $('.g-showContent').hide();
            $(".ke-insertfile").text("[下载]");
            ajaxPage(1);

            function ajaxPage(num) {
                $.ajax({
                    url: $.webConfig.apiUrl + "zbtable/queryzbtable",
                    type: "POST",
                    data: {
                        type:1,
                        rows: 18,
                        page: num
                    },
                    dataType: "json",
                    success: function (data) {

                        //获取模板
                        var jsRenderPage = $.templates('#page-specCard');
                        //末班与数据结合
                        var finalPage = jsRenderPage(data);
                        $('#page-box').html(finalPage);

                        //分页
                        $("#page").paging({
                            pageNo: num,
                            totalPage: Math.ceil(data.return_count / 18),
                            totalSize: data.return_count,
                            callback: function (num) {
                                ajaxPage(num)
                            }
                        })
                    }
                })
            }


            // $('body').on('click', '#operate',function () {

                
            //     $('.g-showContent').show();

            //     var id = $(this).attr('conid');
            //     $.ajax({
            //         url: $.webConfig.apiUrl + "zbtable/getzbtableid",
            //         type: "POST",
            //         data: {
            //             id:id
            //         },
            //         dataType: "json",
            //         success: function (data) {
            //             if (data['return_code'] ==1) {
                            
            //                 $('.g-showContent').html(data['return_body']['content'])

            //             } else {
                            
            //                 alert("内容获取失败")
            //             }

            //         }
            //     })
            // })


        })



        // 定义时间过滤器 yyyy-MM-dd HH:mm:ss
        $.views.converters("timeFilter", function (val) {
            var fmt = "yyyy-MM-dd";
            var data = new Date(val);

            var o = {
                "M+": data.getMonth() + 1, //月份 
                "d+": data.getDate(), //日 
                "h+": data.getHours(), //小时 
                "m+": data.getMinutes(), //分 
                "s+": data.getSeconds(), //秒 
                "q+": Math.floor((data.getMonth() + 3) / 3), //季度 
                "S": data.getMilliseconds() //毫秒 
            };

            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (data.getFullYear() + "").substr(4 -
                RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length ==
                    1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

            return fmt;
        });

        function queryZhiban() {
            var start_time = $('#control_date').val();
            var end_time = $('#control_date2').val();

            if (start_time && end_time) {
                getZhiBan(dataFormate(start_time), dataFormate(end_time));
            }
        }


        // 时间格式化
        function dataFormate(value) {
            var date = new Date(value);
            var year = date.getFullYear().toString();
            var month = (date.getMonth() + 1);
            var day = date.getDate().toString();
            var hour = date.getHours().toString();
            var minutes = date.getMinutes().toString();
            var seconds = date.getSeconds().toString();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        }

        $(function () {
            getZhiBan(dataFormate(new Date((new Date()).getFullYear(), (new Date()).getMonth(), 1)),
                dataFormate(new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0)));
            $('#control_date').val(dataFormate(new Date((new Date()).getFullYear(), (new Date()).getMonth(), 1)));
            $('#control_date2').val(dataFormate(new Date((new Date()).getFullYear(), (new Date()).getMonth() +
                1, 0)));
        });


        function getZhiBan(start_time, end_time) {
            // 获取值班表
            $.ajax({
                type: 'post',
                url: $.webConfig.apiUrl + 'webgg/getWebggByTime',
                data: {
                    starupTime: start_time,
                    endTime: end_time
                },
                dataType: 'json',
                success: function (data) {
                    if (data['return_code'] == 1) {
                        // 友情
                        var jsRenderTplZb = $.templates('#zhiban-specCard');
                        //末班与数据结合
                        var finalTplZb = jsRenderTplZb(data);
                        $('#zhiban-box')[0].innerHTML = finalTplZb;
                    }
                },
                error: function (err) {
                    // console.log(err);
                }
            });
        }
    </script>





    <!-- <script type="text/x-jsrender" id="youqing-specCard">
        {{for return_body}} {{if picClassify == 3}}

        <li class="g-foot-nav-li">
            <a href="{{:jumpPath}}" style="width:100%;height:100%;display:block;">
                <img width="100%" height="100%" src="{{:picUrl}}" alt="{{:title}}">
            </a>
        </li>
        {{/if}} {{/for}}
    </script> -->

    <!-- footer nav -->
    <!-- <div class="g-foot-nav-box">
        <ul class="g-foot-nav-ul" id="youqing-box">
            <li class="g-foot-nav-li">
                加载中...
            </li>
        </ul>
    </div> -->


    </div>

    <!-- 图片接口 -->
    <!-- <script>
        $(function () {
            $.ajax({
                type: 'post',
                url: $.webConfig.apiUrl + 'picture/getListPicture',
                dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data['return_code'] == 1) {

                        // 友情
                        var jsRenderTplYq = $.templates('#youqing-specCard');
                        //末班与数据结合
                        var finalTplYq = jsRenderTplYq(data);
                        $('#youqing-box').html(finalTplYq);

                    }
                },
                error: function (err) {
                    // console.log(err);
                }
            });
        })
    </script> -->


    </div>

    <!-- footer -->
    <div class="s-footer-box">
        <div class="s-footer-logo"></div>

        <!-- footer模板引擎 -->
        <script type="text/x-jsrender" id="footer-specCard">
            <p class="s-footer-content1">
                <span class="left">版权所有: {{:bqsy}}</span>
                <span class="right">地址：{{:dz}}</span>
            </p>
            <p class="s-footer-content2">
                <span class="left">负责人：{{:fzr}}</span>
                <span class="right">维护人：{{:whr}}</span>
            </p>
            <p class="s-footer-content2">
                <span class="left">电话：{{:dh}}</span>
                <span class="right">报警电话：{{:bjdh}}</span>
            </p>

            <p class="s-footer-content2">
                <a href="/app/IE8cn_XP.exe" style="text-decoration:none;color:#fff">【IE浏览器下载】</a>
                <a href="/app/login.html" style="text-decoration:none;color:#fff" target="_blank">| 后台链接</a>
            </p>

            <div class="s-footer-content3">
                <span class="text">
                    <!-- {{:bah}} -->
                </span>
            </div>

            <!-- footerlogo -->
            <!-- <div class="s-footer-icon">
                <div class="s-footer-icon-1"></div>
                <div class="s-footer-icon-2"></div>
            </div> -->
        </script>


        <div class="s-footer-content-box" id="footer-box">

            <p class="s-footer-content1">
                <span class="left">版权所有: 加载中...</span>
                <span class="right">地址：加载中...</span>
            </p>
            <p class="s-footer-content2">
                <span class="left">负责人：加载中...</span>
                <span class="right">维护人：加载中...</span>
            </p>
            <p class="s-footer-content2">
                <span class="left">电话：加载中...</span>
                <span class="right">报警电话：加载中...</span>
            </p>

            <p class="s-footer-content2">
                <a href="/app/IE8cn_XP.exe" style="text-decoration:none;color:#fff">【IE浏览器下载】</a>
                <a href="/app/login.html" style="text-decoration:none;color:#fff" target="_blank">| 后台链接</a>
            </p>

            <div class="s-footer-content3">
                <span class="text">
                     
                </span>
            </div>

            <!-- footerlogo -->
            <!-- <div class="s-footer-icon">
                <div class="s-footer-icon-1"></div>
                <div class="s-footer-icon-2"></div>
            </div> -->


        </div>




    </div>
</body>
<script src="./js/common.js"></script>

</html>